<template>
  <view class="order-detail-container">
    <!-- 取消原因弹窗 -->
    <CancelReasonModal ref="cancelModalRef" @close="closeCancelModal" @submit="handleCancelSubmit" />

    <!-- 状态头部 -->
    <view class="status-header">
      <view class="status-icon">
        <view class="progress-dots">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
      </view>
      <view class="status-info">
        <text class="status-text">进行中</text>
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-section">
      <view class="map-container">
        <!-- 地图组件 -->
        <map id="orderMap" style="width: 100%;height: 400rpx" :latitude="mapCenter.latitude"
          :longitude="mapCenter.longitude" :markers="mapMarkers" :polyline="mapPolyline"></map>


      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="info-card">
      <view class="user-info">
        <view class="avatar">
          <uv-avatar :src="userInfo.avatar"></uv-avatar>
        </view>
        <view class="user-details">
          <text class="user-name">{{ orderInfo.userName }}</text>
          <text class="user-phone">{{ orderInfo.userPhone }}</text>
        </view>
        <view class="license-plate">
          <text class="plate-text">{{ orderInfo.licensePlate }}</text>
        </view>
      </view>
    </view>

    <!-- 派送地址卡片 -->
    <view class="info-card">
      <view class="address-info">
        <view class="address-icon">
          <uv-icon name="map-fill" :size="24" :color="'#FF6B35'" />

        </view>
        <view class="address-details">
          <view class="address-label">派送地址</view>
          <view class="address-text">{{ orderInfo.deliveryAddress }}</view>
        </view>
      </view>
    </view>

    <!-- 产品信息卡片 -->
    <view class="info-card">
      <view class="product-info">
        <view class="product-icon">
          <view class="oil-badge">
            <view class="oil-drop">
              <image :src="orderInfo.goods_image" mode="aspectFill" style="width: 100%; height: 100%;" />
            </view>
          </view>
        </view>
        <view class="product-details">
          <text class="product-name">{{ orderInfo.productName }}</text>
          <text class="product-quantity">用油量: {{ orderInfo.quantity }}升</text>
        </view>
        <view class="product-price">
          <text class="price-symbol">¥</text>
          <text class="price-amount">{{ orderInfo.goods_money }}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="info-card">
      <view class="order-details">
        <view class="detail-item">
          <text class="detail-label">下单时间:</text>
          <text class="detail-value">{{ orderInfo.orderTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">用油时间:</text>
          <text class="detail-value">{{ orderInfo.usageTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">下单方式:</text>
          <text class="detail-value">{{ orderInfo.paymentMethod == 'remaining' ? '余量下单' : '余额下单' }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-button">
        <uv-button text="取消订单" size="large"
          customStyle="width: 100%; height: 88rpx; border-radius: 44rpx;background:#FF6B35;color:#fff"
          @click="cancelOrder" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CancelReasonModal from './CancelReasonModal.vue'
import { UserInfoManager } from '@/utils/userInfo'
import { formatDateTime } from '@/utils/dateTime'
import { useRequest } from '@/api'

const { API_JIDAN_DETAIL_GET, API_CANCEL_ORDER } = useRequest()
const userInfo = UserInfoManager.getUserInfo()
// 路由参数
const orderId = ref('')
const loading = ref(false)


// 订单信息类型定义
interface OrderInfo {
  userName: string
  userPhone: string
  licensePlate: string
  deliveryAddress: string
  goods_image: string
  productName: string
  quantity: number
  goods_money: string
  orderTime: string
  usageTime: string
  paymentMethod: string
  orderLat: number
  orderLng: number
}

// 订单信息
const orderInfo = ref<OrderInfo>({
  userName: '',
  userPhone: '',
  licensePlate: '',
  deliveryAddress: '',
  goods_image: '',
  productName: '',
  quantity: 1,
  goods_money: '',
  orderTime: '',
  usageTime: '',
  paymentMethod: '',
  orderLat: 0,
  orderLng: 0
})

// 地图相关数据
const mapCenter = ref({
  latitude: 39.9042,
  longitude: 116.4074
})

const mapMarkers = ref<any[]>([])

const mapPolyline = ref<any[]>([])

// 取消原因弹窗引用
const cancelModalRef = ref()

// 统一通过 onLoad 获取路由参数，兼容 APP/H5/小程序
onLoad((options: Record<string, any>) => {
  const id = options?.id
  if (id) {
    try { orderId.value = decodeURIComponent(String(id)) } catch { orderId.value = String(id) }
    getOrderDetail()
  }
})

// 取消订单
const cancelOrder = () => {
  cancelModalRef.value?.open()
}

// 关闭取消原因弹窗
const closeCancelModal = () => {
  cancelModalRef.value?.close()
}


// 更新地图数据
const updateMapData = () => {
  const { orderLat, orderLng } = orderInfo.value

  if (orderLat && orderLng) {
    // 设置地图中心点
    mapCenter.value = {
      latitude: orderLat,
      longitude: orderLng
    }

    // 设置地图标记
    mapMarkers.value = [
      {
        id: 1,
        latitude: orderLat,
        longitude: orderLng,
        title: '配送地址',
        width: 20,
        height: 30,
        iconPath: '/static/images/start.png',
        callout: {
          content: orderInfo.value.deliveryAddress,
          color: '#333',
          fontSize: 14,
          borderRadius: 4,
          bgColor: '#fff',
          padding: 8,
          display: 'ALWAYS'
        }
      }
    ]
  }
}

// 处理取消原因提交
const handleCancelSubmit = async (reason: string) => {

  uni.showLoading({
    title: '取消中...'
  })

  try {
    const params = {
      id: orderId.value,
      reason: reason,
      isdriver: UserInfoManager.lastrole()
    }
    const res = await API_CANCEL_ORDER(params)

    if (res.code === 1) {
      uni.showToast({
        title: '订单已取消',
        icon: 'success'
      })

      // 通知订单列表页面刷新
      uni.$emit('refOrderList')

      // 返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (error) {
   
  } finally {
    uni.hideLoading()
  }
}

const getOrderDetail = async () => {
  if (!orderId.value) {
    uni.showToast({
      title: '订单ID不能为空',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    const params = {
      id: orderId.value,
      isdriver: UserInfoManager.lastrole()
    }
    const res = await API_JIDAN_DETAIL_GET(params)
    if (res.code === 1) {
      orderInfo.value = {
        userName: res.data.username || '',
        userPhone: res.data.mobile || '',
        licensePlate: res.data.carnumber || '',
        deliveryAddress: res.data.address_detail || '',
        goods_image: res.data.goods_image || '',
        productName: res.data.goods_name || '-',
        quantity: res.data.usage || 1,
        goods_money: res.data.goods_money || '',
        orderTime: formatDateTime(res.data.order_time) || '2023.10.10 12:00',
        usageTime: formatDateTime(res.data.use_time) || '2023.10.10 12:00',
        paymentMethod: res.data.order_type || '余额下单',
        orderLat: res.data.order_lat || 0,
        orderLng: res.data.order_lng || 0
      }

      // 更新地图数据
      updateMapData()
    }
  } catch (error) {
   
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
.order-detail-container {
  min-height: 100vh;
  background: #f6f7f9;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

/* 状态头部 */
.status-header {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  background: linear-gradient(to bottom, #fff4e8, #fffefd);
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .status-icon {
    margin-right: 24rpx;

    .progress-dots {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: #FF6B35;
        animation: pulse 1.5s ease-in-out infinite;

        &:nth-child(2) {
          animation-delay: 0.2s;
        }

        &:nth-child(3) {
          animation-delay: 0.4s;
        }
      }
    }
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 0.4;
      transform: scale(0.8);
    }

    50% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .status-info {
    flex: 1;

    .status-text {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }
}

/* 地图区域 */
.map-section {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .map-container {
    position: relative;
    height: 400rpx;
    border-radius: 16rpx;
    overflow: hidden;

  }
}

/* 信息卡片 */
.info-card {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      margin-right: 24rpx;
    }

    .user-details {
      flex: 1;

      .user-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .user-phone {
        font-size: 26rpx;
        color: #666;
      }
    }

    .license-plate {
      .plate-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }

  .address-info {
    display: flex;
    align-items: flex-start;

    .address-icon {
      margin-right: 24rpx;
      margin-top: 4rpx;
    }

    .address-details {
      flex: 1;

      .address-label {
       
        margin-bottom: 12rpx;
      }

      .address-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        line-height: 36rpx;
      }
    }
  }

  .product-info {
    display: flex;
    align-items: center;

    .product-icon {
      margin-right: 24rpx;

      .oil-badge {
        width: 80rpx;
        height: 80rpx;
        background: #fff3ed;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .oil-drop {

          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
      }
    }

    .product-details {
      flex: 1;

      .product-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .product-quantity {
        font-size: 26rpx;
        color: #666;
      }
    }

    .product-price {
      text-align: right;

      .price-symbol {
        font-size: 28rpx;
        color: #FF6B35;
      }

      .price-amount {
        font-size: 36rpx;
        font-weight: 600;
        color: #FF6B35;
      }
    }
  }

  .order-details {
    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        font-size: 26rpx;
        color: #666;
      }

      .detail-value {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

/* 底部操作区域 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 40rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;

  .action-button {
    width: 100%;
  }
}
</style>